<template>
  <div style="margin: 20px auto;width: 95%">
    <el-table
      :data="tableData.filter(data => !search
        || data.userName.toLowerCase().includes(search.toLowerCase())
        || data.recordDate.toLowerCase().includes(search.toLowerCase())
        || data.area.toLowerCase().includes(search.toLowerCase())
        || data.workerName.toLowerCase().includes(search.toLowerCase())
      )"
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        type="index"
        width="100"
      />
      <el-table-column
        label="检测人员真实姓名"
        prop="workerName"
        width="120"
      />
      <el-table-column
        label="用户真实姓名"
        prop="userName"
        width="120"
      />
      <el-table-column
        label="检测人员微信号"
        prop="workerOpenId"
      />
      <el-table-column
        label="用户微信号"
        prop="userOpenId"
        width="300px"
      />
      <el-table-column
        label="检测地区"
        prop="area"
      />
      <el-table-column
        label="日期"
        prop="recordDate"
        width="100"
      />
      <el-table-column
        label="体温计数"
        prop="temperature"
        width="50"
      />
      <el-table-column
        align="right"
      >
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="搜索地点，用户，工作者真实姓名,日期"
          />
          <p @click="downloadCsv"><i class="el-icon-edit" />导出excel</p>
        </template>
        <el-table-column
          align="right"
          prop="temperature"
          label="身体状况"
          width="300"
          :filters="[{ text: '健康', value: true }, { text: '不健康', value: false }]"
          :filter-method="filterHealth"
          filter-placement="bottom-end"
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.temperature < 38.0 ? 'success' : 'danger'"
              disable-transitions
            >{{ scope.row.temperature <  38.0 ?'健康':'不健康' }}</el-tag>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[25, 50, 75, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalElement"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>

</template>

<script>
import request from '@/utils/request'
export default {
  name: 'Index',
  data() {
    return {
      tableData: [],
      search: '',
      currentPage: 1,
      totalElement: 400,
      pageSize: 25
    }
  },

  created() {
    const vm = this
    request({
      // url: 'https://localhost/record/person',
      url: 'https://www.laozhoy1.club/record/person',
      method: 'get'
    }).then(function(res) {
      const data = JSON.parse(res.message)
      console.log(data)
      vm.tableData = data
    })
    request({
      // url: 'https://localhost/record/list',
      url: 'https://www.laozhoy1.club/record/list',
      params: { 'pagenum': this.currentPage,
        'pagesize': this.pageSize }
    }).then(function(res) {
      const data = JSON.parse(res.message)
      console.log(data)
      vm.totalElement = data.totalNum
      vm.tableData = data.records
    })
  },
  methods: {
    downloadCsv() {
      request({
        // url: 'https://localhost/download/getrecordcsv',
        url: 'https://www.laozhoy1.club/download/getrecordcsv',
        method: 'get',
        responseType: 'blob'
      }).then(response => {
        const content = response
        const blob = new Blob([content])
        const fileName = '检测记录.xlsx'
        if ('download' in document.createElement('a')) { // 非IE下载
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else { // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
      })
    },
    handleSizeChange(val) {
      // alert(`每页 ${val} 条`)
      this.pageSize = val
      request({
        // url: 'https://localhost/record/list',
        url: 'https://www.laozhoy1.club/record/list',

        params: { 'pagenum': this.currentPage,
          'pagesize': this.pageSize }
      }).then(function(res) {
        console.log(res)
      })
    },
    handleCurrentChange(val) {
      // alert(`当前页: ${val}`)
      this.currentPage = val
      request({
        // url: 'https://localhost/record/list',
        url: 'https://www.laozhoy1.club/record/list',
        params: { 'pagenum': this.currentPage,
          'pagesize': this.pageSize }
      }).then(function(res) {
        console.log(res)
      })
    },
    filterHealth(value, row) {
      if (value){
        return row.temperature < 38.0
      }else {
        return row.temperature >= 38.0
      }
    }
  }
}
</script>

<style scoped>
  .warning-row {
    background-color: #dd4650;
  }

  .success-row {
    background-color: #3ef966;
  }
</style>
